<template>
  <van-popup :show="value" position="bottom" safe-area-inset-bottom custom-style="height: 60%;background: #F9F9F9;" z-index="300" @close="close">
    <div>
      <div class="list_title">优惠 <div class="guanbi iconfont icon-guanbi" @click="close"></div></div>
      <div class="popup_list" v-if="couponList.length > 0">
        <div class="list_box" @tap="click(item)" v-for="(item, couponIndex) in couponList" :key="couponIndex">
          <img class="list_bgimg" v-if="item.isPermanent == 0 && item.remainCount < 1" src="https://zykj-sales.oss-cn-hangzhou.aliyuncs.com/miniprogram/client/static/zymall/voucherbgf.png" alt="">
          <img class="list_bgimg" v-else-if="item.isUse === true" src="https://zykj-sales.oss-cn-hangzhou.aliyuncs.com/miniprogram/client/static/zymall/voucherbgt.png" alt="">
          <img class="list_bgimg" v-else src="https://zykj-sales.oss-cn-hangzhou.aliyuncs.com/miniprogram/client/static/zymall/voucherbgo.png" alt="">
          <div class="list_left">
            <div class="left_money"><span>￥</span>{{item.couponPrice}}</div>
            <div class="left_type">满减券</div>
          </div>
          <div class="list_right">
            <div class="right_condition">购物满{{item.useMinPrice}}元可用</div>
            <div class="right_bottom">   
              <div class="bottom_time" v-if="item.endTime !== 0">
                <data-format-t :data="item.addTime"></data-format-t>-
                <data-format-t :data="item.endTime"></data-format-t>
              </div>
              <div class="bottom_time" v-else>不限时</div>
              <div class="iconfont icon-xuanzhong1 font-color-red" v-if="checked === item.id"></div>
              <div class="iconfont icon-weixuanzhong" v-else></div>
            </div>
          </div>
        </div>
      </div>
      <div class="list_botton_box" v-if="couponList.length > 0">
        <div class="list_botton" @tap="couponNo">不使用优惠券</div>
      </div>
      <div class="noCoupon_box" v-if="!couponList.length && loaded">
        <img :src="$VUE_APP_RESOURCES_URL+'/images/noCoupon.png'" class="noCoupon_img" />
      </div>
    </div>
    
  </van-popup>
</template>
<script>
import { getOrderCoupon } from "@/api/order";
import DataFormatT from "@/components/DataFormatT";
export default {
  name: "CouponListWindow",
  components: {
    DataFormatT
  },
  props: {
    value: Boolean,
    checked: Number,
    price: {
      type: [Number, String],
      default: undefined
    }
  },
  data: function() {
    return {
      couponList: [],
      loaded: false
    };
  },
  watch: {
    price(n) {
      if (n === undefined || n == null) return;
      this.getCoupon();
    }
  },
  mounted: function() {},
  onShow: function() {
    // 解决优惠券已使用后还显示问题
    this.getCoupon();
  },
  methods: {
    close: function() {
      this.$emit("input", false);
      this.$emit("close");
    },
    getCoupon() {
      getOrderCoupon(this.price).then(res => {
        this.couponList = res.data;
        this.loaded = true;
      });
    },
    click(coupon) {
      this.$emit("checked", coupon);
      this.$emit("input", false);
    },
    couponNo: function() {
      this.$emit("checked", null);
      this.$emit("input", false);
    }
  }
};
</script>

<style lang="less" scoped>
  .iconfont {
    font-size: 0.4rem;
  }
  .couponNo {
    font-size: 0.28rem;
    font-weight: bold;
    color: #ffffff;
    width: 6.9rem;
    height: 0.86rem;
    border-radius: 0.43rem;
    text-align: center;
    line-height: 0.86rem;
    margin: 0.6rem auto;
  }
  .list_title{
    position: fixed;
    height: 100rpx;
    width: 750rpx;
    display: flex;
    background-color: #f9f9f9;
    justify-content: center;
    align-items: center;
    color: #333333;
    z-index: 1;
    font-size: 28rpx;
    .guanbi{
      height: 100rpx;
      width: 100rpx;
      position: absolute;
      right: 0;
      top: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 36rpx;
      color: #999999;
    }
  }
  .popup_list{
    padding: 100rpx 30rpx 120rpx 30rpx;
    .list_box{
      width: 690rpx;
      height: 186rpx;
      position: relative;
      margin-bottom: 25rpx;
      .list_bgimg{
        width: 690rpx;
        height: 186rpx;
      }
      .list_left{
        position: absolute;
        left: 0;
        top: 0;
        height: 186rpx;
        width: 216rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column; 
        .left_money{
          color: #FFFFFF;
          font-size: 66rpx;
          margin-bottom: 10rpx;
          span{
            font-size: 30rpx;
          }
        } 
        .left_type{
          margin-bottom: 10rpx;
          color: #ffffff;
          font-size: 24rpx;
        }      
      }
      .list_right{
        right: 0;
        position: absolute;
        top: 0;
        height: 186rpx;
        width: 450rpx;
        .right_condition{
          color: #333333;
          font-size: 32rpx;
          height: 100rpx;
          line-height: 100rpx;
          width: 450rpx;
        }
        .right_bottom{
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 60rpx;
          margin-top: 10rpx;
          padding-right: 12rpx;
          .bottom_time{
            color: #999999;
            font-size: 20rpx;
          }
          .button{
            height: 50rpx;
            width: 156rpx;
            border-radius: 50rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24rpx;
          }
          .finish{
            color: #ffffff;
            background-color: #e0e0e0;
          }
          .employ{
            color: #FF983D;
            border: 1rpx solid #FF983D;
          }
          .receive{
            background-color: #FF983D;
            color: #ffffff;
          }
        }
      }
      
    }
  }
  .list_botton_box{
    position: fixed;
    bottom: 0;
    height: 120rpx;
    width: 750rpx;
    display: flex;
    background-color: #f9f9f9;
    justify-content: center;
    align-items: center;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    .list_botton{
      z-index: 1;
      background-color: #FC6941;
      height: 80rpx;
      width: 690rpx;
      border-radius: 50rpx;
      display: flex;
      font-size: 28rpx;
      color: #ffffff;
      justify-content: center;
      align-items: center;
    }
  }
  .noCoupon_box{
    width: 750rpx;
    padding-top: 160rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    .noCoupon_img{
      width: 414rpx;
      height: 336rpx;
    }
  }
</style>
